<template>
  <div>
    <h1>登陆页面</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">帐号</td>
          <td><input type="text" v-model="info.userName" /></td>
        </tr>
        <tr>
          <td align="right">密码</td>
          <td><input type="password" v-model="info.userPwd" /></td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="登陆"
              class="btn btn-success"
              @click="login"
            />
          </td>
        </tr>
      </tbody>
    </table>
    {{ info }}
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import axios from 'axios';
//导入创建路由器对象的方法
import { useRouter } from 'vue-router';
//创建一个路由器对象 可以实现页面跳转push方法可以实现页面跳转
const router = useRouter();

//声明登陆的数据
let info = ref({
  userName: '',
  userPwd: '',
});

const login = () => {
  //1.判断非空和有效性
  if (info.value.userName == '') {
    alert('帐号不能为空');
    return;
  }
  if (info.value.userPwd == '') {
    alert('密码不能为空');
    return;
  }
  //2.发送网络请求到数据库中验证帐号和密码是否存在
  axios({
    url: '/api/Admins/Login', //后端请求的地址
    method: 'post', //请求方式
    params: info.value,
    // params: {
    //   userName: info.value.userName,
    //   userPwd: info.value.userPwd,
    // }, //params  根据后端情况而定  向后端传递参数
  })
    .then((res) => {
      //then相当于success  then 就是成功  res后端返回成功的结果
      console.log(res);
      if (res.data == -1) {
        alert('帐号不存在，请联系管理员');
        return;
      }

      if (res.data == -2) {
        alert('密码错误');
        return;
      }

      //1.提示登陆成功  2.存储用户信息 3.跳转到会员增加路径
      alert('登陆成功');
      router.push('/memberAdd');
    })
    .catch((err) => {
      //catch相当于error catch失败 err后端请求失败时的结果
      console.log(err);
    });
};
</script>

<style scoped></style>
